<template>
  <div>
    <el-radio-group v-model="radio">
      <el-radio :label="0">官方样式</el-radio>
      <el-radio :label="1">带二维码的图片</el-radio>
    </el-radio-group>
    <div style="margin-top: 10px">
      <div v-if="radio === 0">
        <div >
          注：此组件必须先在微信公众平台开通。
        </div>
        <span
          @click="operBtn"
          class="operBtn"
          >开通步骤</span
        >
      </div>
      <div v-if="radio === 1">
        <div style="display: flex">
          <div class="upload-container">
            <el-upload
              :action="imageUploadUrl"
              :show-file-list="false"
              :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
              :before-upload="handleImgBefore"
              :on-success="
                (res, file) => {
                  return handleImgSuccess(res, file, 'icon');
                }
              "
              :style="{ width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
              class="app-uploader-img-plus"
            >
              <el-image
                v-if="proto"
                :style="{ width: '50px', height: '50px' }"
                :src="fileBaseUrl + proto"
                class="img"
                fit="contain"
              />
              <i
                v-else
                :style="{ width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
                class="el-icon-plus"
              />
            </el-upload>
          </div>
          <div style="font-size: 12px; line-height: 20px; margin-left: 10px">
            <div>
              只能上传jpg/png/gif文件，建议高度60px，且不超过1MB
            </div>
          </div>
        </div>
      </div>
    </div>
    <CustomerOperation ref="customerOperationDialog"></CustomerOperation>
  </div>
</template>


<script>
import CustomerOperation from "../../../components/DialogInsideLink/components/CustomerOperation.vue";
import { mapGetters } from "vuex";
import { imgUploadUrl } from "@/api/upload";
export default {
  components: {
    CustomerOperation,
  },
  data() {
    return {
      type: "",
      radio: 0,
      imageUploadUrl: imgUploadUrl,
      proto: "",
    };
  },
  computed: {
    ...mapGetters(["activePageForm", "fileBaseUrl"]),
    radioAndProto() {
      const { proto, radio } = this
      return { proto, radio }
    }
  },
  watch: {
    radioAndProto({ proto, radio }) {
      let module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      module.pic = radio === 0 ? '' : proto
      module.biz.params = { type: radio }
      this.$store.dispatch('setActivePageForm', JSON.parse(JSON.stringify(this.activePageForm)))
    }
  },
  mounted() {

    let module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
    if(!module.biz?.params) return
    this.type = module.type;
    this.proto = module.pic
    if(module.biz.params && typeof module.biz.params === 'string') {
      module.biz.params = JSON.parse(module.biz.params)
      this.radio = module.biz.params.type
    } else {
      this.radio = module.biz.params.type
    }

  },
  methods: {
    //操作详情
    operBtn() {
      this.$refs.customerOperationDialog.open({ roleType: "gz_gzh" });
    },
    handleImgSuccess(res, file, type) {
      if (res.code === 0) {
        this.proto = res.data.path;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleImgBefore(file) {
      return this.beforeUploadImg(file, this, 0, 0, 1, ["JPG", "PNG", "GIF"]);
    },
  },
};
</script>

<style lang="scss" scoped>
.operBtn {
  color: #409eff;
  cursor: pointer;
}
</style>
